<template>
	<div class="regBox" v-if="is_show">
		<div class="con">
			<i aria-label="图标: close" class="close" @click="closeLogin">
				<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" data-icon="close" fill="currentColor" aria-hidden="true" focusable="false" class="">
					<g id="comm_icon_x" transform="translate(-1209.5 -160.5)">
						<path id="Line_14" data-name="Line 14" d="M14,15a1,1,0,0,1-.707-.293l-14-14a1,1,0,0,1,0-1.414,1,1,0,0,1,1.414,0l14,14A1,1,0,0,1,14,15Z" transform="translate(1210.5 161.5)"></path>
						<path id="Line_15" data-name="Line 15" d="M0,15a1,1,0,0,1-.707-.293,1,1,0,0,1,0-1.414l14-14a1,1,0,0,1,1.414,0,1,1,0,0,1,0,1.414l-14,14A1,1,0,0,1,0,15Z" transform="translate(1210.5 161.5)"></path>
					</g>
				</svg>
			</i>
			<div class="title">{{$t('h_pcRecharge.title1')}}</div>
			<div class="jilu">{{$t('h_pcRecharge.title2')}}</div>
			<div class="tabs">
				<div class="tabsitem" :class="tab == 0 ? 'active':''" @click="tab = 0">
					{{$t('h_pcRecharge.title3')}}
					<div>
						<p class="text">{{$t('h_pcRecharge.title4')}}1%</p>
						<p class="icon"></p>
					</div>
				</div>
				<div class="tabsitem" :class="tab == 1 ? 'active':''" @click="tab = 1">
					{{$t('h_pcRecharge.title5')}}
					<div>
						<p class="text">{{$t('h_pcRecharge.title4')}}1%</p>
						<p class="icon"></p>
					</div>
				</div>
			</div>
			<div v-if="tab == 0">
				<div class="list">
					<div class="item" :class="itemselect == item ? 'active':''" @click="itemselect = item" v-for="item in 6">
						<img src="https://zswsql-266-ppp.oss-accelerate.aliyuncs.com/siteadmin/upload/img/finance-1691066237342-800078.png" alt="">
						<div class="text1">{{$t('h_pcRecharge.title6')}}</div>
						<div class="tips">
							<div class="text">{{$t('h_pcRecharge.title4')}}0.7%</div>
							<div class="icon"></div>
						</div>
						<p v-if="itemselect == item">
							<i class="gou" style="display: inline-flex; justify-content: center; align-items: center;">
								<svg viewBox="0 0 20 15" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
									<use xlink:href="/icons/icon.svg#comm_icon_gou--sprite"></use>
								</svg>
							</i>
							<i class="bg" style="display: inline-flex; justify-content: center; align-items: center;">
								<svg viewBox="0 0 28 28" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
									<use xlink:href="/icons/icon.svg#comm_img_corner--sprite"></use>
								</svg>
							</i>
						</p>
					</div>
				</div>
				<div class="list" style="border-bottom: 0;">
					<div class="item" :class="item1select == item ? 'active':''" @click="item1select = item" v-for="item in 12" v-if="item <= 6 || showmore">
						<div class="text1">{{$t('h_pcRecharge.title7')}}</div>
						<p v-if="item1select == item">
							<i class="gou" style="display: inline-flex; justify-content: center; align-items: center;">
								<svg viewBox="0 0 20 15" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
									<use xlink:href="/icons/icon.svg#comm_icon_gou--sprite"></use>
								</svg>
							</i>
							<i class="bg" style="display: inline-flex; justify-content: center; align-items: center;">
								<svg viewBox="0 0 28 28" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
									<use xlink:href="/icons/icon.svg#comm_img_corner--sprite"></use>
								</svg>
							</i>
						</p>
					</div>
				</div>
				<div class="more" @click="showmore = !showmore">
					<div class="text2" v-if="!showmore">{{$t('h_pcRecharge.title8')}}</div>
					<div class="text2" v-if="showmore">{{$t('h_pcRecharge.title9')}}</div>
					<div class="icon1" :class="showmore ? 'style':''"></div>
				</div>
				<div class="text3" style="margin-bottom: 15px;">{{$t('h_pcRecharge.title10')}}</div>
				<div class="list" style="border-bottom: 0;">
					<div class="item item1" :class="item2select == item ? 'active':''" @click="item2select = item;num = item" v-for="item in 8">
						<div class="text1">{{item}}</div>
						<p v-if="item2select == item">
							<i class="gou" style="display: inline-flex; justify-content: center; align-items: center;">
								<svg viewBox="0 0 20 15" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
									<use xlink:href="/icons/icon.svg#comm_icon_gou--sprite"></use>
								</svg>
							</i>
							<i class="bg" style="display: inline-flex; justify-content: center; align-items: center;">
								<svg viewBox="0 0 28 28" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
									<use xlink:href="/icons/icon.svg#comm_img_corner--sprite"></use>
								</svg>
							</i>
						</p>
					</div>
				</div>
				<div class="input">
					<span>￥</span>
					<el-input v-model="num" :placeholder="$t('h_pcRecharge.title11')"/>
					<i aria-label="图标: close-circle" tabindex="-1" class="anticon anticon-close-circle ant-input-clear-icon" v-if="num!=''" @click="num='';item2select=0">
						<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 28 28" data-icon="close-circle" fill="currentColor" aria-hidden="true" focusable="false" class="">
							<path id="close_fill" d="M3323,1936a14,14,0,1,1,9.9-4.1A13.907,13.907,0,0,1,3323,1936Zm0-12.351h0l4.536,4.537a1.167,1.167,0,1,0,1.65-1.65l-4.537-4.537,4.537-4.537a1.167,1.167,0,1,0-1.65-1.65l-4.536,4.536-4.538-4.536a1.167,1.167,0,1,0-1.65,1.65l4.538,4.537-4.538,4.537a1.167,1.167,0,0,0,1.65,1.65l4.537-4.537Z" transform="translate(-3309 -1908)"></path>
						</svg>
					</i>
				</div>
				<div class="text3">{{$t('h_pcRecharge.title12')}}</div>
				<div class="text4">{{$t('h_pcRecharge.title13')}}</div>
			</div>
			<div v-if="tab == 1">
				<div class="list">
					<div class="item" :class="item3select == item ? 'active':''" @click="item3select = item" v-for="item in 2">
						<img src="https://zswsql-266-ppp.oss-accelerate.aliyuncs.com/siteadmin/upload/img/finance-20230401-937912.png" alt="">
						<div class="text1">{{$t('h_pcRecharge.title14')}}</div>
						<div class="tips">
							<div class="text">{{$t('h_pcRecharge.title4')}}1%</div>
							<div class="icon"></div>
						</div>
						<p v-if="itemselect == item">
							<i class="gou" style="display: inline-flex; justify-content: center; align-items: center;">
								<svg viewBox="0 0 20 15" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
									<use xlink:href="/icons/icon.svg#comm_icon_gou--sprite"></use>
								</svg>
							</i>
							<i class="bg" style="display: inline-flex; justify-content: center; align-items: center;">
								<svg viewBox="0 0 28 28" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
									<use xlink:href="/icons/icon.svg#comm_img_corner--sprite"></use>
								</svg>
							</i>
						</p>
					</div>
				</div>
				<div class="list">
					<div class="item" :class="item4select == item ? 'active':''" @click="item4select = item" v-for="item in 6">
						<div class="text1">{{$t('h_pcRecharge.title15')}}</div>
						<p v-if="item4select == item">
							<i class="gou" style="display: inline-flex; justify-content: center; align-items: center;">
								<svg viewBox="0 0 20 15" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
									<use xlink:href="/icons/icon.svg#comm_icon_gou--sprite"></use>
								</svg>
							</i>
							<i class="bg" style="display: inline-flex; justify-content: center; align-items: center;">
								<svg viewBox="0 0 28 28" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
									<use xlink:href="/icons/icon.svg#comm_img_corner--sprite"></use>
								</svg>
							</i>
						</p>
					</div>
				</div>
				<div class="text3" style="margin-bottom: 15px;" v-if="change">{{$t('h_pcRecharge.title16')}}</div>
				<div class="text3" style="margin-bottom: 15px;" v-if="!change">{{$t('h_pcRecharge.title17')}}</div>
				<div class="list" style="border-bottom: 0;">
					<div class="item item1" :class="item5select == item ? 'active':''" @click="item5select = item;num = item" v-for="item in 8">
						<div class="text1">{{item}}</div>
						<p v-if="item5select == item">
							<i class="gou" style="display: inline-flex; justify-content: center; align-items: center;">
								<svg viewBox="0 0 20 15" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
									<use xlink:href="/icons/icon.svg#comm_icon_gou--sprite"></use>
								</svg>
							</i>
							<i class="bg" style="display: inline-flex; justify-content: center; align-items: center;">
								<svg viewBox="0 0 28 28" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
									<use xlink:href="/icons/icon.svg#comm_img_corner--sprite"></use>
								</svg>
							</i>
						</p>
					</div>
				</div>
				<div class="inputbox">
					<div class="input">
						<span v-if="change">￥</span>
						<span v-if="!change">U</span>
						<el-input v-model="num1" :placeholder="$t('h_pcRecharge.title11')"/>
						<i aria-label="图标: close-circle" tabindex="-1" class="anticon anticon-close-circle ant-input-clear-icon" v-if="num1!=''" @click="num1='';item5select=0">
							<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 28 28" data-icon="close-circle" fill="currentColor" aria-hidden="true" focusable="false" class="">
								<path id="close_fill" d="M3323,1936a14,14,0,1,1,9.9-4.1A13.907,13.907,0,0,1,3323,1936Zm0-12.351h0l4.536,4.537a1.167,1.167,0,1,0,1.65-1.65l-4.537-4.537,4.537-4.537a1.167,1.167,0,1,0-1.65-1.65l-4.536,4.536-4.538-4.536a1.167,1.167,0,1,0-1.65,1.65l4.538,4.537-4.538,4.537a1.167,1.167,0,0,0,1.65,1.65l4.537-4.537Z" transform="translate(-3309 -1908)"></path>
							</svg>
						</i>
					</div>
					<div class="change" @click="change = !change">
						<i style="display: inline-flex; justify-content: center; align-items: center;">
							<svg viewBox="0 0 20 15.816" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
								<use xlink:href="/icons/icon.svg#comm_icon_qhhb--sprite"></use>
							</svg>
						</i>
					</div>
				</div>
				<div class="huilv">
					{{$t('h_pcRecharge.title18')}}
					<span>￥1 : U0.1356296849</span>
					<i style="display: inline-flex; justify-content: center; align-items: center;">
						<svg viewBox="0 0 24 25.144" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
							<use xlink:href="/icons/icon.svg#comm_icon_sx--sprite"></use>
						</svg>
					</i>
				</div>
				<div class="text3">{{$t('h_pcRecharge.title19')}}</div>
				<div class="text4">{{$t('h_pcRecharge.title20')}}</div>
			</div>
			<div class="btn">{{$t('h_pcRecharge.title21')}}</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				is_show:false,
				tab:0,
				
				itemselect:1,
				item1select:1,
				showmore:false,
				item2select:0,
				num:'',
				
				item3select:1,
				item4select:1,
				item5select:0,
				num1:'',
				change:true
			};
		},
		methods: {
			openLogin(){
				this.is_show = true
			},
			closeLogin(){
				this.is_show = false
			}
		}
	}
</script>

<style lang="less" scoped>
	*{
		box-sizing: border-box;
	}
	.regBox{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, .5);
		z-index: 997;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.con{
		width: 433px;
		height: 648px;
		overflow-y: scroll;
		background-color: var(--theme-top-nav-bg);;
		border: thin solid;
		border-color: var(--theme-color-line);
		border-radius: 10px;
		position: relative;
		padding: 0 15px 15px 15px;
	}
	.con::-webkit-scrollbar{
		display: none;
	}
	.close{
		color: var(--theme-text-color);
		font-size: 12px;
		height: 44px;
		line-height: 44px;
		width: 44px;
		text-align: center;
		position: absolute;
		right: 0;
		top: 0;
	}
	.title{
		height: 31px;
		margin-top: 15px;
		font-size: 17px;
		color: #fff;
		font-weight: 700;
		text-align: center;
	}
	
	.btn{
		width: 100%;
		height: 43px;
		text-align: center;
		line-height: 43px;
		background-color: var(--theme-primary-color);
		margin-bottom: 15px;
		color: #fff;
		font-size: 15px;
		border-radius: 10px;
		cursor: pointer;
		margin-top: 15px;
	}
	.jilu{
		color: var(--theme-primary-color);
		cursor: pointer;
		font-size: 14px;
		position: absolute;
		right: 47px;
		top: 11px;
	}
	.tabs{
		width: 100%;
		height: 47px;
		display: flex;
		justify-content: flex-start;
		padding-top: 17px;
		border-bottom: 1px solid var(--theme-color-line);
	}
	.tabsitem{
		position: relative;
		height: 29px;
		margin-right: 23px;
		border-bottom: 2px solid transparent;
		color: #fff;
		cursor: pointer;
		font-size: 14px;
	}
	.tabsitem.active{
		color: var(--theme-primary-color);
		border-bottom: 2px solid var(--theme-primary-color);
	}
	.tabsitem div{
		height: 25px;
		position: absolute;
		right: 0;
		top: -14px;
	}
	.tabsitem div .text{
		background-color: #ea4e3d;
		border-radius: 5px 5px 5px 0;
		color: #fff;
		font-size: 12px;
		height: 15px;
		line-height: 15px;
		padding: 0 6px;
		width: 100%;
	}
	.tabsitem div .icon{
		border-bottom: 5px solid transparent;
		border-left: 6px solid var(--theme-secondary-color-error);
		border-right: 6px solid transparent;
		height: 0;
		width: 0;
	}
	.list{
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		padding-top: 15px;
		padding-bottom: 7px;
		border-bottom: 1px solid var(--theme-color-line);
	}
	.item{
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		margin-bottom: 15px;
		border-radius: 7px;
		cursor: pointer;
		height: 47px;
		margin-right: 3.5%;
		position: relative;
		width: 31%;
		border: 1px solid var(--theme-color-line);
	}
	.item1{
		width: 22.375%;
	}
	.item:nth-child(3n){
		margin-right: 0;
	}
	.item1:nth-child(3n){
		margin-right: 3.5%;
	}
	.item1:nth-child(4n){
		margin-right: 0;
	}
	.item img{
		width: 34px;
		height: 34px;
		margin-left: 6px;
		margin-right: 2px;
	}
	.item .text1{
		flex:1;
		text-align: center;
		color: #ffffff;
		font-size: 14px;
	}
	.item.active{
		border: 1px solid var(--theme-primary-color);
	}
	.item.active .text1{
		color: var(--theme-primary-color);
	}
	.item p{
		bottom: -1px;
		display: block;
		height: 23px;
		line-height: 23px;
		overflow: hidden;
		position: absolute;
		right: -1px;
		width: 23px;
	}
	.item p .gou{
		bottom: 3px;
		color: var(--theme-primary-font-color);
		height: 7px;
		position: absolute;
		right: 3px;
		width: 9px;
	}
	.item p .bg{
		color: var(--theme-active-bg-color);
		height: 100%;
		width: 100%;
	}
	.tips{
		width: 50px;
		height: 25px;
		position: absolute;
		right: 0;
		top: -14px;
	}
	.tips .text{
		background-color: #ea4e3d;
		border-radius: 5px 5px 5px 0;
		color: #fff;
		font-size: 12px;
		height: 15px;
		line-height: 15px;
		width: 100%;
		text-align: center;
	}
	.tips .icon{
		border-bottom: 5px solid transparent;
		border-left: 6px solid var(--theme-secondary-color-error);
		border-right: 6px solid transparent;
		height: 0;
		width: 0;
	}
	.more{
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		height: 36px;
		border-bottom: 1px solid var(--theme-color-line);
		cursor: pointer;
	}
	.more .text2{
		color: var(--theme-primary-color);
		font-size: 14px;
		margin-right: 11px;
	}
	.more .icon1{
		border-right: 1px solid var(--theme-primary-color);
		border-top: 1px solid var(--theme-primary-color);
		height: 10px;
		width: 10px;
		margin-top: 5px;
		transform: rotate(135deg) translateY(5px);
	}
	.more .icon1.style{
		margin-top: 7px;
		transform: rotate(-45deg);
	}
	.input{
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		height: 47px;
		border: 1px solid var(--theme-color-line);
		border-radius: 7px;
	}
	.input span{
		width: 50px;
		text-align: center;
		color: #ffffff;
		font-size: 18px;
		font-weight: 700;
	}
	.el-input{
		flex: 1;
	}
	/deep/ .el-input__inner{
		width: 99%!important;
		height: 45px!important;
		border: 0!important;
		border-radius: 0!important;
		font-size: 14px!important;
		padding: 0!important;
	}
	.input i{
		display: flex;
		align-items: center;
		color: var(--theme-text-color-lighten);
		cursor: pointer;
		font-size: 22px;
		margin-right: 10px;
	}
	.text3{
		margin-top: 23px;
		color: var(--theme-text-color-darken);
		font-size: 14px;
		margin-bottom: 4px;
	}
	.text4{
		color: var(--theme-text-color-lighten);
		font-size: 14px;
	}
	.inputbox{
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		height: 47px;
	}
	.inputbox .input{
		flex: 1;
	}
	.change{
		align-items: center;
		border: thin solid var(--theme-color-line);
		border-radius: 7px;
		cursor: pointer;
		display: flex;
		height: 47px;
		justify-content: center;
		margin-left: 15px;
		position: relative;
		width: 51px;
	}
	.change i{
		color: var(--theme-primary-color);
		font-size: 23px;
	}
	.huilv{
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-top: 7px;
		font-size: 14px;
		color: var(--theme-text-color);
	}
	.huilv i{
		color: var(--theme-primary-color);
		cursor: pointer;
		font-size: 14px;
		margin-left: 7px;
		margin-top: 1px;
	}
</style>